<template>
	<div class="arrearsStatistics">
		<!--面包屑-->
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>停车记录</el-breadcrumb-item>
				<el-breadcrumb-item :to="{ name: 'berthVideoAnalysis'}">泊位视频识别分析 </el-breadcrumb-item>
				<el-breadcrumb-item>桥西法院桥泊位识别详情</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--主体内容-->
		<div class="content">
			<!--搜索条件区域-->
			<div class="searchWrapper">
				<el-form :inline="true" label-position="right" label-width="100px" :model="formInline" class="demo-form-inline">
					<el-form-item label="泊位号">
						<el-select v-model.trim="formInline.parkSpaceId" filterable placeholder="">
							<el-option label="全部" value=""></el-option>
							<el-option :label="berth.berthNumber" :value="berth.parkSpaceId" v-for="berth in berthList" :key="berth.parkSpaceId"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="数据类型">
						<el-select v-model.trim="formInline.parkSpaceId" filterable placeholder="">
							<el-option label="入场" value="0"></el-option>
							<el-option label="出场" value="1"></el-option>
						</el-select>
					</el-form-item>					
					<el-form-item label="时间">
						<el-date-picker v-model.trim="formInline.date" type="date" placeholder="选择时间" >
						</el-date-picker>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model.trim="formInline.entryExitType" filterable placeholder="">
							<el-option label="车场识别率" value="0"></el-option>
							<el-option label="泊位识别率" value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="">
						<el-select v-model.trim="formInline.entryExitType" filterable placeholder="">
							<el-option label="90%以上" value=""></el-option>
							<el-option label="80%~90%" value="0"></el-option>
							<el-option label="60%~80%" value="1"></el-option>
							<el-option label="60%以下" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchData">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!--列表区域-->
			<div class="tableWrapper">
				<el-table v-loading="loading" :data="tableData" style="width: 100%" height="400">
					<el-table-column type="index" label="序号" width="70"></el-table-column>
					<el-table-column :prop="item.prop" :label="item.label" :width="item.width" v-for="item in tableCols" :key="item.prop"></el-table-column>
					<!--<el-table-column label="泊位数" width="70">
						<template scope="scope">
							<el-button type="text" @click="showDetail(scope.$index, scope.row)">详情</el-button>
						</template>
					</el-table-column>-->
				</el-table>
			</div>
			<!--分页器-->
			<div class="pagerWrapper">
				<div class="block">
					<div class="inline-block left">
						<!--<el-button type="text"><span class="export"><i class="iconfont icon-daochu"></i> 导出CSV</span></el-button>-->
						共{{total}}条记录，每页显示15条
					</div>
					<el-pagination @size-change="" @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getData,
		dateFormat
	} from '../../common/js/public.js'
	export default {
		name: 'hello',
		data () {
			return {
				index: 0,
				total: 0,
				pageSize: 15,
				pageNum: 1,
				loading: false,
				detailFlag: false,
				areaList: [],
				parkList: [],
				berthList: [],
				tableCols: [{
					prop: 'areaName',
					label: '泊位号',
					width: '80'
				}, {
					prop: 'parkType',
					label: '总记录数',
					width: ''
				}, {
					prop: 'parkName',
					label: '视频识别占比',
					width: ''
				}, {
					prop: 'berthNumber',
					label: '手持终端占比',
					width: ''
				}, {
					prop: 'plateNumber',
					label: '巡检录入占比',
					width: ''
				}, {
					prop: 'entryTime',
					label: '视频设备名称',
					width: ''
				}],
				tableData: [],
				formInline: {
					cityId: '',
					region: '',
					rsType: '',
					parkId: '',
					parkSpaceId: '',
					parkType: '',
					plateNumber: '',
					isValid: '1',
					entryExitType: '0',
					date: ''
				},
				infoSize: 6,
				infoData: [{
					label: '停车场名称',
					value: 'parkName'
				}, {
					label: '入场时间',
					value: 'entryTime'
				}, {
					label: '出场时间',
					value: 'exitTime'
				}, {
					label: '车牌号码',
					value: 'plateNumber'
				}, {
					label: '泊车位号',
					value: 'berthNumber'
				}, {
					label: '是否违章',
					value: '西路南6'
				}, {
					label: '支付金额',
					value: 'actualPay'
				}, {
					label: '支付状态',
					value: 'chargeType',					
					style: {color: '#56bd5b'}
				}, {
					label: '入场数据来源',
					value: 'dataSourceStr'
				}, {
					label: '出场数据来源',
					value: 'dataSourceStr2'
				}, {
					label: '操作人',
					value: 'rsuserId'
				}],
				infoDetail: {}
			}
		},
		methods: {
			handleCurrentChange (val) {
		       this.pageNum = val;
		       this.searchData();
		    },
			showLog (data) {
				if (data && data.length === 2) {
					let startTime = dateFormat(data[0], 'yyyy-MM-dd HH:mm:ss');
					let endTime = dateFormat(data[1], 'yyyy-MM-dd HH:mm:ss');
					this.formInline.startTime = startTime;
					this.formInline.endTime = endTime;
				}				
			},
			changeDetail (type) {		
				console.log(type)
				if ((this.index === 0 && type === 'pre') || (this.index === 14 && type === 'next')) {
					this.$alert('没有更多数据了', '提示', {
						confirmButtonText: '确定'
					});
				} else {
					type === 'pre' ? this.index -- : this.index ++;						
					let opt = {
						url: '/sym_analysis/api/v1/parking/queryParkRecordDetail',
						data: {
							parkRecordId: this.tableData[this.index].parkRecordId
						},
						success: (res) => {
							this.infoDetail = res.data.ParkRecordVO;
						}
					};
					getData(opt);
				}				
			},
			showDetail (index, obj) {
				this.index = index;
				this.detailFlag = true;
				let opt = {
					url: '/sym_analysis/api/v1/parking/queryParkRecordDetail',
					data: {
						parkRecordId: obj.parkRecordId
					},
					success: (res) => {
						this.infoDetail = res.data.ParkRecordVO;
					}
				};
				getData(opt);
			},
			// 获取区域
			getArea () {
				let opt = {
					url: '/sym_analysis/api/v1/parking/getAllSubAreasByCityId',
					data: {},
					success: (res) => {
						this.areaList = res.data.AreaDetail;
					}
				};
				getData(opt);
			},
			// 获取停车场
			getPark () {
				this.parkList = [];
				let opt = {
					url: '/sym_analysis/api/v1/parking/getParkingLotBrifsByCityId',
					data: {
						rsType: this.formInline.rsType,
						cityId: this.formInline.cityId						
					},
					success: (res) => {
						this.parkList = res.data.ParkingLotBrifVO;
					}
				};
				getData(opt);
			},
			// 获取泊位号
			getBerth (parkId) {
				let opt = {
					url: '/sym_analysis/api/v1/parking/getSpaceNumbersByParkId',
					data: {
						parkId: this.formInline.parkId
					},
					success: (res) => {
						this.berthList = res.data.ParkingSpaceBrifVO;
					}
				};
				getData(opt);
			},
			// 搜索
			searchData () {
				this.tableData = [];
				this.loading = true;
				let opt = {
					url: '/sym_analysis/api/v1/parking/getParkingRecord',
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					data: this.formInline,
					success: (res) => {
						this.tableData = res.data.ParkingSpaceBrifVO;
						this.total = res.total;
						this.loading = false;
					},
					fail: (res) => {						
						this.loading = false;
						this.$alert(res.msg, '提示', {
							confirmButtonText: '确定'
						});
					}
				};
				getData(opt);
			}
		},
		components: {
			
		},
		mounted () {
			this.getArea();
			this.getPark();
		},
		computed: {			
		}
	}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">
.breadcrumb 
	height: 30px;
	overflow: hidden;	
.content	
	background: #FFFFFF;
	box-shadow: 0 0 2px 1px rgba(128,145,165,0.30);
	border-radius: 3px;
	padding: 15px;
	overflow: hidden;
	.searchWrapper
		overflow: hidden;
	.pagerWrapper
		text-align: right;		
		margin-top: 28px;
		font-size: 12px;
		.export
			font-size: 12px;
			.iconfont
				margin-right: 0;
.detail
	width: 61.4%;
	height: 82.9%;
	position: absolute;
	top: 8.6%;
	left: 20.1%;
	background: #FFFFFF;
	box-shadow: 0 0 4px 1px rgba(128,145,165,0.30);
	border-radius: 3px;	
	z-index: 1000;
	box-sizing: border-box;
	padding: 20px 0;
	.title
		position: absolute;
		background: #3F4A56;
		border-radius: 3px 3px 0 0;
		color: #fff;
		width: 100%;
		top: 0;
		left: 0;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding: 0 12px;
		box-sizing: inherit;
		z-index: 100;
		.el-icon-close
			float: right;
			margin-top: 14px;
	.info
		margin-top: 20px;
		padding: 2.1%;	
		height: 100%;
		overflow: auto;
		box-sizing: inherit;
.mask
	background: rgba(49,53,65,0.60);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
</style>
